import React, { Fragment, useEffect, useState } from 'react';
import { history } from 'umi';
import { ConfigProvider, Button } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import actions from '@/shared/actions';
import styles from './index.less';

const BasicLayout = (props) => {
  /**
   * 计数器---用于接收父应用传递过来的消息--测试父子应用通信
   */
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    // 接收基座发送过来的数据信息
    actions.onGlobalStateChange((state: any) => {
      const { count } = state;
      setCount(count);
    });
  }, []);

  /**
   * 发送消息到基座
   */
  const fns = () => {
    actions.setGlobalState({
      count: count + 1,
    });
  };

  return (
    <Fragment>
      {/* ConfigProvider 是为了解决antd 默认英文字样 */}
      <ConfigProvider locale={zhCN}>
        <div className={styles.content_s}>
          <div>
            接收来自父应用发送过来的消息：{count}{' '}
            <Button onClick={fns}>发送消息给基座</Button>
          </div>
        </div>
        <div>{props.children}</div>
      </ConfigProvider>
    </Fragment>
  );
};

export default BasicLayout;
